<template>
  <h1>hello vue3</h1>
  <p>{{ counterStore.count }}</p>
  <p>{{ counterStore.age }}</p>
  <p>{{ counterStore.oddOrEven }}</p>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</template>

<script setup lang="ts">
import { useCounterStore } from "./store/modules/counter";
// 获取counter模块的store
// 所有数据（state,getters,actions）读会直接数据代理代理到store上，可以通过store直接使用数据
const counterStore = useCounterStore();
// 注意，数据解构出来就会失去响应式
// const { count } = counterStore;

/*
  更新pinia数据的三种方式:
    1. 如果是直接更新数据
      - 更新一个数据：第一种
      - 更新多个数据：第三种
    2. 如果更新数据的时候需要发送请求，用第二种
*/

const increment = () => {
  // 第二种：调用action函数更新数据
  counterStore.increment(1);
};

const decrement = () => {
  // 更新pinia数据的三种方式
  // 第一种：直接更新数据
  // counterStore.count--;

  // 第三种：更新多个数据
  counterStore.$patch({
    count: counterStore.count - 1,
    age: counterStore.age + 1,
  });
};
</script>

<style scoped></style>
